<template>
  <div>
    <el-container>
      <!-- 表单头部 -->
      <el-header>
        <el-form ref="formData" :inline="true" label-position="left" size="small" :model="formData">
          <template v-for="item in formList">
            <el-form-item :label="item.title" class="header-form" :key="item.name" v-if="!('hidden' in item) || !item.hidden.header">
              <!-- 动态下拉框 -->
              <template v-if="item.type == formItemType.SELECT">
                <el-select :placeholder="`请选择${item.title}`" filterable clearable v-model="formData[item.name]">
                  <el-option
                    v-for="optionItem in item.optionList"
                    :key="optionItem['key' in item ? item.key : 'name']"
                    :label="optionItem['label' in item ? item.label : 'title']"
                    :value="optionItem['key' in item ? item.key : 'name']">
                    <span class="select-left">{{ optionItem['label' in item ? item.label : 'title'] }}</span>
                    <span class="select-right" v-if="!('showValue' in item) || item.showValue">{{
                      optionItem['key' in item ? item.key : 'name']
                    }}</span>
                  </el-option>
                </el-select>
              </template>
              <!-- 树形选择框 -->
              <template v-else-if="item.type == formItemType.TREE">
                <el-cascader
                  :placeholder="`请选择${item.title}`"
                  clearable
                  filterable
                  :options="item.optionList"
                  :props="{
                    expandTrigger: 'hover',
                    emitPath: 'emitPath' in item ? item.emitPath : true,
                    value: 'value' in item ? item.value : 'value',
                    label: 'label' in item ? item.label : 'label',
                    children: 'children' in item ? item.children : 'children',
                  }"
                  :show-all-levels="'emitPath' in item ? item.emitPath : true"
                  :emitPath="'emitPath' in item ? item.emitPath : true"
                  v-model="formData[item.name]">
                  <template slot-scope="{ node, data }">
                    <span>{{ data[item.label] }}</span>
                    <span v-if="!node.isLeaf"> ({{ data[item.children].length }}) </span>
                  </template>
                </el-cascader>
              </template>
              <!-- 动态输入框 -->
              <template v-else>
                <el-input :placeholder="`请输入${item.title}`" clearable v-model="formData[item.name]"></el-input>
              </template>
            </el-form-item>
          </template>
          <!-- 表单尾部 -->
          <el-form-item>
            <el-button
              v-if="'insertButton' in formButtonCtl ? formButtonCtl.insertButton : true"
              type="success"
              icon="el-icon-circle-plus"
              @click="initSubmitData(dialogType.INSERT, {})"
              >新增</el-button
            >
            <el-button
              v-if="'deleteButton' in formButtonCtl ? formButtonCtl.deleteButton : true"
              type="danger"
              icon="el-icon-delete-solid"
              @click="deleteDataMethod(currentTableSelectIds)"
              >批量删除</el-button
            >
            <el-button
              type="primary"
              v-if="'selectButton' in formButtonCtl ? formButtonCtl.selectButton : true"
              icon="el-icon-search"
              @click="selectMethod(formData)"
              >查询</el-button
            >
            <el-button
              type="warning"
              v-if="'selectButton' in formButtonCtl ? formButtonCtl.selectButton : true"
              icon="el-icon-refresh"
              @click="refreshData"
              >重置</el-button
            >
            <!-- 导出按钮 -->
            <el-button
              icon="el-icon-download"
              type="success"
              v-if="'exportButton' in formButtonCtl ? formButtonCtl.exportButton : true"
              @click="exportExcelMethod"
              >导出Excel
            </el-button>
            <!-- 导入按钮 -->
            <el-upload
              class="import-excel"
              action="#"
              :limit="1"
              v-if="'importButton' in formButtonCtl ? formButtonCtl.importButton : true"
              :on-progress="importExcelMethod"
              accept=".xlsx,.xls"
              auto-upload
              :show-file-list="false">
              <el-button type="primary" icon="el-icon-upload2">导入Excel</el-button>
            </el-upload>
            <!-- 自定义添加头部按钮 -->
            <slot name="header-form-button"></slot>
          </el-form-item>
        </el-form>
      </el-header>
      <!-- 表格区 -->
      <el-container style="height: 70vh">
        <!-- 扩展点(可以在表格区域插入自定义内容) -->
        <el-aside :width="`${tableLeftWidth}%`" style="height: 100%">
          <slot name="table-other" :item="currentTableColumn"></slot>
        </el-aside>
        <!-- 表格区 -->
        <el-main>
          <el-table
            highlight-current-row
            :data="tableData"
            border
            ref="dataTable"
            :row-key="getRowKey"
            height="100%"
            @selection-change="getIdsForCheckBox"
            @row-click="currentColumnClick">
            <!-- 复选框列 -->
            <el-table-column type="selection" width="30" reserve-selection />
            <!-- 序号列 -->
            <el-table-column align="center" fixed label="序号" type="index" width="60" />
            <el-table-column
              v-for="column in tableColumns"
              :key="column.name"
              :label="column.title"
              :width="'width' in column ? column.width : 120"
              show-overflow-tooltip
              :prop="column.name"
              :filters="coverFilters(column)"
              :filter-method="filterMethod"
              sortable
              align="center">
              <template slot-scope="scope">
                <!-- 其他列 -->
                <template v-if="!('type' in column) || column.type == tableColumnType.TEXT"
                  >{{ 'prefix' in column ? column.prefix : ''
                  }}{{ 'tipMap' in column ? column.tipMap[scope.row[column.name]] : scope.row[column.name]
                  }}{{ 'suffix' in column ? column.suffix : '' }}</template
                >
                <!-- 标签列 -->
                <template v-else-if="column.type == tableColumnType.TAG">
                  <el-tooltip
                    :content="'tipMap' in column ? column.tipMap[scope.row[column.name]] : scope.row[column.name]"
                    effect="dark"
                    placement="top">
                    <el-tag :type="'tagStyle' in column ? column.tagStyle[scope.row[column.name]] : 'default'"
                      >{{ 'tipMap' in column ? column.tipMap[scope.row[column.name]] : scope.row[column.name] }}
                    </el-tag>
                  </el-tooltip>
                </template>
                <!-- 自定义动态列 -->
                <slot name="table-custom-column" :item="scope.row" v-else-if="column.type == `${tableColumnType.CUSTOM}_${column.name}`"></slot>
                <!-- 图片列 -->
                <template v-else-if="column.type == tableColumnType.IMAGE">
                  <image-preview :src="downloadFile(scope.row[column.name])" width="50%" height="50%" />
                </template>
                <!-- 图标 -->
                <template v-else-if="column.type == tableColumnType.ICON">
                  <svg class="sub-el-icon" aria-hidden="true" v-if="scope.row[column.name].includes('smart-village-')">
                    <use :xlink:href="`#${scope.row[column.name]}`"></use>
                  </svg>
                  <i :class="scope.row[column.name]" v-else></i>
                </template>
              </template>
            </el-table-column>
            <!-- 操作列 -->
            <el-table-column align="center" label="操作" :width="optionColumnConfig.optionColumnWidth" v-if="currentButtonCount - 1 >= 0">
              <template slot-scope="scope">
                <!-- 详情按钮 -->
                <el-button
                  icon="el-icon-info"
                  type="success"
                  v-if="'detailButton' in formButtonCtl ? formButtonCtl.detailButton : true"
                  @click="initSubmitData(dialogType.DETAIL, scope.row)"
                  >详情
                </el-button>
                <!-- 修改按钮 -->
                <el-button
                  icon="el-icon-edit"
                  type="primary"
                  v-if="'updateButton' in formButtonCtl ? formButtonCtl.updateButton : true"
                  @click="initSubmitData(dialogType.UPDATE, scope.row)"
                  >修改
                </el-button>
                <!-- 删除按钮 -->
                <el-button
                  icon="el-icon-delete"
                  type="danger"
                  v-if="'deleteButton' in formButtonCtl ? formButtonCtl.deleteButton : true"
                  @click="deleteDataMethod([scope.row.id])"
                  >删除
                </el-button>
                <!-- 加入插槽 -->
                <slot name="table-button" :row="scope.row"></slot>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
      <!-- 表单尾部 -->
      <el-footer>
        <!-- 分页插件 -->
        <el-pagination
          hide-on-single-page
          :current-page.sync="pageObj.current"
          :page-size="pageObj.size"
          :page-sizes="[10, 15, 20, 25, 30, 50, 80, 100]"
          :total="dataTotal"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="changePageSize"
          @current-change="changeCurrentPage"
          v-if="'pagination' in formButtonCtl ? formButtonCtl.pagination : true" />
        <!-- 弹窗 -->
        <el-dialog
          :title="`${title}${currentDialogType}`"
          :width="dialogWidth == undefined ? '40%' : dialogWidth + '%'"
          :visible.sync="dialogFormVisible"
          center>
          <!-- 详情信息 -->
          <el-descriptions :title="`${title}${currentDialogType}`" :column="1" v-if="currentDialogType == dialogType.DETAIL">
            <template v-for="item in formList">
              <!-- 自定义 -->
              <slot
                name="dialog-custom-detail-item"
                v-if="item.type == `${formItemType.CUSTOM}_${item.name}`"
                :item="{ optionFormData, item }"></slot>
              <el-descriptions-item :key="item.name" :label="item.title" v-else-if="!('hidden' in item) || !item.hidden.detailDialog">
                <!-- 标签 -->
                <template v-if="'type' in item && item.type == formItemType.SELECT">
                  <el-tooltip
                    :content="'tipMap' in item ? item.tipMap[optionFormData[item.name]] : optionFormData[item.name]"
                    effect="dark"
                    placement="top">
                    <el-tag :type="'tagStyle' in item ? item.tagStyle[optionFormData[item.name]] : 'default'"
                      >{{ 'tipMap' in item ? item.tipMap[optionFormData[item.name]] : optionFormData[item.name] }}
                    </el-tag>
                  </el-tooltip>
                </template>
                <!-- 图片 -->
                <template v-else-if="'type' in item && item.type == formItemType.IMAGE">
                  <image-preview :src="downloadFile(optionFormData[item.name])" width="50%" height="50%" />
                </template>
                <!-- markdown -->
                <template v-else-if="'type' in item && item.type == formItemType.MARKDOWN">
                  <v-md-editor
                    mode="preview"
                    v-model="optionFormData[item.name]"
                    :height="'height' in item ? item.height : '300px'"
                    :disabled-menus="[]"></v-md-editor>
                </template>
                <!-- 文本 -->
                <template v-else
                  >{{ 'prefix' in item ? item.prefix : '' }}{{ optionFormData[item.name] }}{{ 'suffix' in item ? item.suffix : '' }}</template
                >
              </el-descriptions-item>
              <!-- 自定义插槽 -->
              <slot name="dialog-custom-description" :item="item"></slot>
            </template>
          </el-descriptions>
          <!-- 表单主体 -->
          <el-form :model="optionFormData" ref="ruleForm" :rules="formRules" v-else>
            <template v-for="item in formList">
              <!-- 自定义 -->
              <slot name="dialog-custom-form-item" v-if="item.type == `${formItemType.CUSTOM}_${item.name}`" :item="{ optionFormData, item }"></slot>
              <el-form-item
                :key="item.name"
                :prop="item.name"
                :label="item.title"
                :label-width="dialogLabelWidth == undefined ? '20%' : dialogLabelWidth + '%'"
                v-else-if="
                  !('hidden' in item) ||
                  (currentDialogType == dialogType.INSERT && !item.hidden.insertDialog) || // 新增弹窗
                  (currentDialogType == dialogType.UPDATE && !item.hidden.updateDialog) // 修改弹窗
                ">
                <!-- 选择框 -->
                <template v-if="item.type == formItemType.SELECT">
                  <el-select
                    :placeholder="`请选择${item.title}`"
                    clearable
                    filterable
                    v-model="optionFormData[item.name]"
                    @change="'change' in item && item.change(optionFormData)">
                    <el-option
                      v-for="optionItem in item.optionList"
                      :key="optionItem['key' in item ? item.key : 'name']"
                      :label="optionItem['label' in item ? item.label : 'title']"
                      :value="optionItem['key' in item ? item.key : 'name']">
                      <span class="select-left">{{ optionItem['label' in item ? item.label : 'title'] }}</span>
                      <span class="select-right" v-if="!('showValue' in item) || item.showValue">{{
                        optionItem['key' in item ? item.key : 'name']
                      }}</span>
                    </el-option>
                  </el-select>
                </template>
                <!-- 时间选择 -->
                <template v-else-if="item.type == formItemType.TIME">
                  <el-date-picker
                    :default-value="new Date()"
                    v-model="optionFormData[item.name]"
                    :type="'timeType' in item ? item.timeType : 'date'"
                    :format="'format' in item ? item.format : 'yyyy 年 MM 月 dd 日'"
                    :value-format="'valueFormat' in item ? item.valueFormat : 'yyyy-MM-dd'"
                    :placeholder="`请选择${item.title}`"></el-date-picker>
                </template>
                <!-- 树形选择框 -->
                <template v-else-if="item.type == formItemType.TREE">
                  <el-cascader
                    :placeholder="`请选择${item.title}`"
                    clearable
                    filterable
                    :show-all-levels="'emitPath' in item ? item.emitPath : true"
                    :options="item.optionList"
                    :props="{
                      expandTrigger: 'hover',
                      checkStrictly: 'checkStrictly' in item ? item.checkStrictly : false,
                      emitPath: 'emitPath' in item ? item.emitPath : true,
                      value: 'value' in item ? item.value : 'value',
                      label: 'label' in item ? item.label : 'label',
                      children: 'children' in item ? item.children : 'children',
                    }"
                    v-model="optionFormData[item.name]"
                    @change="'change' in item ? item.change : ''">
                    <template slot-scope="{ node, data }">
                      <span>{{ data[item.label] }}</span>
                      <span v-if="!node.isLeaf"> ({{ data[item.children].length }}) </span>
                    </template>
                  </el-cascader>
                </template>
                <!-- 文件上传框 -->
                <template v-else-if="item.type == formItemType.IMAGE">
                  <el-upload
                    ref="upload"
                    class="upload_file"
                    action="#"
                    list-type="picture"
                    :file-list="[fileList, ...optionFormData[item.name]]"
                    :limit="1"
                    :on-progress="uploadFile"
                    drag
                    :accept="'accept' in item ? item.accept : '.jpg,.png,.jpeg'"
                    :auto-upload="true">
                    <i class="el-icon-upload"></i>
                    <p class="el-upload__text">将文件拖到此处，或<em>点击上传</em></p>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </template>
                <!-- 大文件上传框 -->
                <template v-else-if="item.type == formItemType.FILE">
                  <uploader
                    class="uploader_file"
                    :options="options"
                    @file-success="onFileSuccess"
                    :file-status-text="fileStatusText"
                    @file-added="filesAdded">
                    <uploader-unsupport></uploader-unsupport>
                    <uploader-drop class="uploader-drop">
                      <i class="el-icon-upload upload-icon"></i>
                      <p class="uploader-text">将文件拖到此处,或<uploader-btn>选择文件</uploader-btn></p>
                    </uploader-drop>
                    <uploader-list id="uploaderList"></uploader-list>
                  </uploader>
                </template>
                <!-- markdown -->
                <template v-else-if="item.type == formItemType.MARKDOWN">
                  <v-md-editor
                    v-model="optionFormData[item.name]"
                    :height="'height' in item ? item.height : '400px'"
                    :placeholder="`请输入${item.title}`"
                    @upload-image="markdownUploadFile"
                    :disabled-menus="[]"></v-md-editor>
                </template>
                <!-- 数字框 -->
                <template v-else-if="item.type == formItemType.NUMBER">
                  <el-input-number
                    v-model="optionFormData[item.name]"
                    :max="'numberRange' in item ? item.numberRange.max : Number.max"
                    :min="'numberRange' in item ? item.numberRange.min : 0"
                    :placeholder="`请输入${item.title}`" />
                </template>
                <!-- 输入框 -->
                <template v-else>
                  <el-input
                    :placeholder="`请输入${item.title}`"
                    clearable
                    autosize
                    :maxlength="!('maxLength' in item) ? Number.MAX_SAFE_INTEGER : item.maxLength"
                    :show-word-limit="'maxLength' in item"
                    v-model="optionFormData[item.name]"
                    :type="item.type == formItemType.TEXTAREA ? 'textarea' : 'text'"></el-input>
                </template>
              </el-form-item>
            </template>
          </el-form>
          <!-- 表单尾部 -->
          <div slot="footer" class="dialog-footer">
            <!-- 详情 -->
            <template v-if="currentDialogType == dialogType.DETAIL">
              <el-button @click="dialogFormVisible = false" type="primary">关 闭</el-button>
            </template>
            <!-- 其他 -->
            <template v-else
              ><el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" :loading="optionButtonLoading" @click="insertUpdateMethod(currentDialogType, optionFormData)">{{
                `${currentDialogType}${title}`
              }}</el-button></template
            >
          </div>
        </el-dialog>
        <!-- 自定义弹窗 -->
        <slot name="dialog-custom-form"></slot>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import js from './index.js'
export default js
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
